<template>
<div class="df aic colorBar" :class="{ colorBarMt: mt, isMobile: isMobile }">
    <div v-for="(item, index) in colorList" class="colorItem" :key="index" :style="{ background: item.color }" :class="{ select: item.color == targetColor }" @click="handleClick(item.color)"></div>
    <div v-if="!isSelected" class="colorItem fc" @click="handleSelect">
        <img src="@img/colorSelect.png" alt="colorSelect">
    </div>
    <div v-else class="colorItem" :style="{ background: targetColor }" @click="handleSelect"></div>
</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineProps, defineEmits } from "vue";
import { EditOutlined } from '@ant-design/icons-vue';

const props = defineProps({
    targetColor: {
        type: String,
        default: 'rgb(239, 15, 15)'
    },
    isSelected: {
        type: Boolean,
        default: false
    },
    mt: {
        type: Boolean,
        default: false
    },
    isMobile: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['colorChange', 'colorSelect'])

const colorList = ref([
    { color: 'rgb(239, 15, 15)' },
    { color: 'rgb(27, 75, 217)' },
    { color: 'rgb(249, 115, 22)' },
    { color: 'rgb(217, 26, 202)' },
    { color: 'rgb(6, 182, 212)' },
])

const handleClick = (color: string) => {
    emit('colorChange', color)
}

const handleSelect = (e: Event) => {
    emit('colorSelect', e)
}

</script>

<style lang="scss">
.colorBar {
    &.isMobile {
        // 移动端样式
        .colorItem {
            width: 6vmin !important;
            height: 6vmin !important;
        }
    }
    &.colorBarMt {
        margin-top: 2vmin;
    }
    .colorItem {
        width: 3vmin;
        height: 3vmin;
        border-radius: 50%;
        margin-right: 2vmin;
        cursor: pointer;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
        &.select {
            position: relative;
            border: 2px solid #3498db;
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: rgba(0, 0, 0, .3);
            }
        }
    }
}
</style>